<template>
	<view class="wrap">
		<view class="content">
			<view class="form-content">
				<view class="title">欢迎登录</view>
			    <u-form :model="form" ref="uForm" label-width="120">
			        <u-form-item prop="name">
			        	<u-input v-model="form.name" placeholder="请输入用户名" placeholder-style="color:#636363"/>
			        </u-form-item>
			        <u-form-item prop="password">
			        	<u-input type="password" v-model="form.password" placeholder="请输入密码" placeholder-style="color:#636363" />
			        </u-form-item>
			    </u-form>
			
			    <button @click="submit" style="background-color: #0285ff;color: #FFFFFF;height: 80rpx;border-radius: 50rpx;line-height: 80rpx;font-size: 30rpx;">登录</button>
			</view>
			<view class="alternative" style="color:#636363">
				<view class="password" @click="passwordLogin()">忘记密码</view>
				<view class="issue" @click="loginBy()">遇到问题</view>
			</view>
		</view>
		
		<!-- <view class="">
			
		</view> -->
		<view>
			<u-popup v-model="show" mode="center" border-radius="14" width="500rpx" height="100rpx" :closeable="true" style="text-align: center;font-size: 30rpx;line-height: 100rpx;">
				<view>用户名或密码错误</view>
			</u-popup>
		</view>
		
	</view>
	<view class="img">
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				show : false,
				form: {
				    name: '',
				    password: ''
				},
				user:[],
				rules: {
				        name: [{
				            required: true,
				            message: '请输入用户名',
				            // 可以单个或者同时写两个触发验证方式
				            trigger: 'blur'
				        }
						],
				        password: [{
				            required: true,
				            message: '请输入密码',
				            // 可以单个或者同时写两个触发验证方式
				            trigger: 'blur'
				        }
						]
				}
			}
		},
		onReady() {
		    this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
				    if (valid) {
						uni.request({
						  url: "http://127.0.0.1:4523/m1/1653531-0-default/info",
						  success: (res) => {
							let user=res.data.data[0].user
							let x=0
							user.forEach(user=>{
								if(user.username==this.form.name&&user.pwd==this.form.password){
									this.$store.state.userInfo.username=this.form.name
									this.$store.state.userInfo.password=this.form.password
									this.$store.state.userInfo.isLogin=true
									this.$store.state.userInfo.order=user.order
									// console.log(this.$store.state.userInfo)
									uni.setStorage({
										key: 'userInfo',
										data: this.$store.state.userInfo,
										success: function () {
											// console.log('success');
										}
									});

									x=1;
									uni.switchTab({
									    url: "/pages/mine/index"
									})
								}
							})
							if(x==0){
								this.show=true
							}
						  },
						  fail: (err) => {
						    console.error(err,11111111111);
						  },
						});
				    } else {
				        // console.log('验证失败');
						
				    }
				});
				
			},
			loginBy(type) {
				this.$u.toast('开发中，敬请期待');
			},
			goPage(url) {
				this.$u.route({
					url: url
				})
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;
		// position: absolute;
		// top: 0;
		padding-top: 100rpx;
		background: url(../../../static/VCG211248320154-MDG.jpg) no-repeat;
		background-size: 100% 1182rpx;
		width: 100%;
		height: 1182rpx;
		opacity: 1.8;
		.content {
			width: 600rpx;
			margin: 0 auto;
			padding: 100rpx;
			background-color: rgba($color: #ffffff, $alpha: 0.9);
			border-radius: 20rpx;
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}
			input::placeholder {
			    color: #FFFFFF;
			    // opacity: 1; //兼容火狐默认给占位符设置了透明度
			}
			.tips {
				color: $u-type-info;
				font-size: 20rpx;
				margin-bottom: 60rpx;
				margin-top: 30rpx;
			}

			.getSmsCode {
				background-color: #9ad6fb;
				color: #FFFFFF;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.bottom {
			.loginType {
				display: flex;
				padding: 260rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
	
</style>

